<template>
  <svg class="formula-content" overflow="visible" :width="box.w + 32" :height="box.h + 32" stroke="#000" stroke-width="1"
    fill="none" stroke-linecap="round" stroke-linejoin="round">
    <g :transform="`scale(${scale}, ${scale}) translate(0,0) matrix(1,0,0,1,0,0)`" transform-origin="0 50%">
      <path :d="pathd"></path>
    </g>
  </svg>
</template>

<script setup lang="ts">
import { computed, ref, watch, defineProps } from 'vue'
import { hfmath } from 'hfmath'

const props = defineProps({
  latex: {
    type: String,
    required: true
  },
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  }
})

const box = ref({ x: 0, y: 0, w: 0, h: 0 })
const pathd = ref('')

watch(() => props.latex, () => {
  const eq = new hfmath(props.latex)
  pathd.value = eq.pathd({})
  box.value = eq.box({})
}, { immediate: true })

const scale = computed(() => {
  const boxW = box.value.w + 32
  const boxH = box.value.h + 32
  if (boxW > props.width || boxH > props.height) {
    if (boxW / boxH > props.width / props.height) return props.width / boxW
    return props.height / boxH
  }
  return 1
})
</script>

<style lang="scss" scoped>
svg {
  overflow: hidden;
}
</style>